<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ音乐</title>
	<style>
.os_mac{
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #fafafa;
    overflow-y: scroll;
    min-width: 1000px;
}
.mod_header{
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #fff;
    position: relative;
    z-index: 4;
}
.section_inner{
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    max-width: 1200px;
    position: relative;
    margin: 0 50px;
    min-width: 900px;
    padding-top: 90px;
}
.qqmusic_title{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 22px;
}
.qqmusic_logo{
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 100%;
    color: #000;
    border: 0 none;
    width: 170px;
    height: 46px;
}
.mod_top_nav{
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 198px;
    top: 0;
}
.top_nav_item{
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
    margin-right: -5px;
}
.top_nav_link--current1{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 90px;
    height: 90px;
    text-align: center;
    font-size: 18px;
    background-color: #31c27c;
    color: #fff;
}
.top_nav_link--current2{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 90px;
    height: 90px;
    text-align: center;
    font-size: 18px;
    background-color: #fafafa;
    color:#0c0c0c;
}
.mod_top_subnav{
    color: #000;
    font-size: 14px;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    height: 51px;
    line-height: 51px;
    border-top: 1px solid #f2f2f2;
    padding-left: 230px;
    margin-right: -50px;
}
.top_subnav_item{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    line-height: 51px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 15px;
    color: #c1c1c1;
    margin-right: 47px;
}
.top_subnav__link{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    line-height: 51px;
    list-style: none;
    font-size: 15px;
    text-decoration: none;
    display: block;
    color: #31c27c;
}
.mod_top_search{
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: absolute;
    top: 25px;
    right: 250px;
}
.g-search{
        display: flex;
        width: 250px;
        height: 32px;
        margin: 0 auto;
        border: 1px solid #c9c9c9;
        border-radius: 16px 0 0 16px
    }
.u-search{
        width: 50px;
        background-color: #c9c9c9;
        outline: none;
        border: none;
        cursor: pointer
    }
.u-iput{
        flex: 1;
        outline: none;
        border: none;
        margin-left: 1rem
    }
.div1{
    /*border:5px solid #ffdc00;*/
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;   
    background:50% 0 repeat-x;
}
.mod_top_login{
     position: absolute;
     top: -5px;
     right: -60px;
    border:1px solid #CCCCCC;

     
}
.login{
  position: absolute;
 width: 45px;
 height: 25px;
 text-align:center;
 line-height:45px;
     top: 25px;
     right: 250px;
     font-size: 15px;
   
}
.VIP{
    width: 100px;
 height: 45px;
 text-align:center;
 line-height:45px;
  position: absolute;
     top: 25px;
     right: 130px;
    border:1px solid #CCCCCC;
    background-color: #31c27c;
    border-radius:5px
}
.pay{
    width: 80px;
 height: 45px;
 text-align:center;
 line-height:45px;
     position: absolute;
     top: 25px;
     right: 40px;
    border:1px solid #CCCCCC;
    border-radius:5px
}
.div1{
    /*border:5px solid #ffdc00;*/
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;
    margin:0 auto;
    background:50% 0 repeat-x;
}
.div2{
    /*border:5px solid #ffdc00;*/
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    max-width: 1200px;
    position: relative;
    margin: 0 75px;
    min-width: 900px;
    z-index: 2;
    overflow: hidden;
    background-color: #FFFFFF;
   background: url(./images/背景1.jpg) 50% 0 repeat-x;
}
.div3{
    /*border:5px solid #ffdc00;*/
        color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    left: 0;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    height: 100%;
}
.div21{
    color: #000;
    font-size: 30px;
    line-height: 1.5;
    text-align: center;        /*文字水平居中对齐*/
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;
    padding-top: 4.16667%;
    padding-bottom: 2%;
}
.div22{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    height: 50px;
    text-align: center;
    font-size: 0;
}
.div23{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 0;
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: -20px;
}
.div24{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    width: 100%;
    text-align: center;
    font-size: 0;
}
.a1{
        line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 0 24px;
    color: #31c27c;
}
.ul1{
    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 0;
    width: 1250%;
    transition: .5s;
    margin-right: -20px;
    left: -0%;
}
.li1{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    vertical-align: top;
    position: relative;
    width: 1.6%;
    padding-bottom: 0;
}
.div231{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    font-size: 14px;
    margin-right: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.div2311{
     color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    font-size: 14px;
    zoom: 1;
    position: relative;
    display: block;
    overflow: hidden;
    padding-top: 100%;
    margin-bottom: 15px;
}
.h41{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 100%;
    overflow: hidden;
}
.div2312{
        line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    font-size: 14px;
}
.img1{
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    transform: scale(1) translateZ(0);
    transition: transform .75s;
    height: 90%;
    object-fit: cover;
    /*transform: scale(1.4);*/
}
.span1{
        color: #000;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    font-size: 100%;
    float: left;
    max-width: 100%;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
    max-height: 44px;
    white-space: normal;
}
.a2{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    font-weight: 400;
    line-height: 22px;
    white-space: normal;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}
.a241{
     line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-align: center;
    font-size: 0;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    width: 28px;
    height: 12px;
    padding: 0 0 26px;
    margin: 0 1px;
    background: transparent;
}
.i411{
        line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-align: center;
    font-size: 0;
    color: #000;
    cursor: pointer;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 12px;
    margin: 0 auto;
    background-color: rgba(0,0,0,.3);
}
.i412{
     text-align: center;
    color: #000;
    cursor: pointer;
    font: 0/0 a;
}
.div31{
        color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    left: 0;
}
.div32{
        color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    right: 0;
}
.a311{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    top: 50%;
    margin-top: -54px;
    width: 79px;
    height: 108px;
    background: rgba(0,0,0,.05);
    opacity: 0;
    transition-property: opacity,transform;
    transition-duration: .5s;
    z-index: 4;
    transform: translateX(-100%);
    left: 0;
}
.i3111{
        color: #000;
    cursor: pointer;
    font: 0/0 a;
}
.i3112{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #000;
    cursor: pointer;
    background-image: -webkit-image-set(url(/ryqq/static/media/icon_sprite.630b3e60.png) 1x,url(/ryqq/static/media/icon_sprite@2x.bf4cef49.png) 2x);
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 20px;
    height: 39px;
    left: 29px;
    background-position: -20px -120px;
}
.a321{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    top: 50%;
    margin-top: -54px;
    width: 79px;
    height: 108px;
    background: rgba(0,0,0,.05);
    opacity: 0;
    transition-property: opacity,transform;
    transition-duration: .5s;
    z-index: 4;
    transform: translateX(100%);
    right: 0;
}
.i3211{
        color: #000;
    cursor: pointer;
    font: 0/0 a;
}
.i3212{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #000;
    cursor: pointer;
    background-image: -webkit-image-set(url(/ryqq/static/media/icon_sprite.630b3e60.png) 1x,url(/ryqq/static/media/icon_sprite@2x.bf4cef49.png) 2x);
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 20px;
    height: 39px;
    right: 29px;
    background-position: 0 -120px;
}
  .footer{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #333;
    clear: both;
    color: #999;
  }
  
  .footer_info{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    overflow: hidden;
    border-bottom: 1px solid #353535;
    position: relative;
    padding-bottom: 45px;
  }
  .footer_copyright{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    padding: 24px 0;
  }
  p{
        font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    margin: 0;
    padding: 0;
  }
  .footera{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    text-decoration: none;
    color: #999;
  }
  .footer_download{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 0;
    left: 10px;
  }
  .footer_product{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 0;
    width: 360px;
    left: 37.5%;
  }
.footer_group{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 300px;
    width: 304px;
    left: 37.5%;
}
.footer_link{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    float: right;
    padding-bottom: 57px;
    width: 200px;
}
.footer_platform{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 300px 0 0 10px;
}
.footer_tit{
        line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    padding: 80px 0 30px;
}
.footer_download_list{
        font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    margin-left: -25px;
}
.footer_download_list_item{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    text-align: center;
    position: relative;
}
}
.icon_txt{
      list-style: none;
    text-align: center;
    cursor: pointer;
    color: #999;
    font: 0/0 a;
}
.pc{
  width:65px;
  height:50px;     
  line-height: 150px;   /*行高，控制pc字样的位置  */     
  margin:0px 100px 100px 0px;  /*外边距  上右下左*/
  border-radius: 10px; /* 圆角矩形*/
 /* border:1px #e8e8e8 solid;  边框*/
  background: url("./images/footer图标.png") -0px -0px no-repeat;
}
/*:hover用于选择鼠标指针浮动在上面的元素*/
.pc:hover{
  background: url("./images/footer图标.png") -0px -50px no-repeat;
}
.qmkg{
  background: url("./images/footer图标.png") -360px -0px no-repeat;
}
.qmkg:hover{
  background: url("./images/footer图标.png") -360px -50px no-repeat;
}
.mac{
  width:65px;
  height:50px;    
   line-height: 150px;           
  margin:-150px 100px 100px 100px;
  border-radius: 10px; 
  background: url("./images/footer图标.png") -88px -0px no-repeat;
}
.mac:hover{
  background: url("./images/footer图标.png") -88px -50px no-repeat;
}
.super{
   background: url("./images/footer图标.png") -448px -0px no-repeat;
}
.super:hover{
   background: url("./images/footer图标.png") -448px -50px no-repeat;
}
.android{
  width:65px;
  height:50px; 
   line-height: 150px;              
  margin:-150px 100px 100px 200px;
  border-radius: 10px; 
  background: url("./images/footer图标.png") -176px -0px no-repeat;
}
.android:hover{
  background: url("./images/footer图标.png") -176px -50px no-repeat;
}
.Qplay{
  background: url("./images/footer图标.png") -536px -0px no-repeat;
}
.Qplay:hover{
  background: url("./images/footer图标.png") -536px -50px no-repeat;
}
.iphone{
  width:100px;
  height:50px;  
   line-height: 150px;             
 margin:-150px 100px 100px 300px;  
  border-radius: 10px; 
  background: url("./images/footer图标.png") -264px -0px no-repeat;
}
.iphone:hover{
  background: url("./images/footer图标.png") -264px -50px no-repeat;
}
.Fan{
  background: url("./images/footer图标.png") -624px -0px no-repeat;
}
.Fan:hover{
  background: url("./images/footer图标.png") -624px -50px no-repeat;
}
.footer_link_list{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
}
.footer_link_list_item{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    min-width: 100px;
    margin-bottom: 12px;
}
.js_other_link{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    color: #999;
}
</style>
</head>
<body class="os_mac">
	<div class="mod_header">
    	<div class="section_inner">
    		<h1 class="qqmusic_title">
				<a href="https://y.qq.com">
				<!-- 图片和网页在同一级目录，引用的时候  ./ -->
					<img src="./images/logo.png" alt="" class="qqmusic_logo"> 
				</a>
   			</h1>
   			<ul class="mod_top_nav" role="nav">
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current1" title="音乐馆">音乐馆</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="我的音乐">我的音乐</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="客户端">客户端</a>
				</li>
				<li class="top_nav_item">
					<a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="开放平台">开放平台</a>
				</li>
                <li class="top_nav_item">
                    <a href="https://y.qq.com" class="top_nav_link top_nav_link--current2" title="VIP">VIP</a>
                </li>
  			</ul>
            
   			<ul class="mod_top_subnav">
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">首页</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">歌手</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">新碟</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">排行榜</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">分类歌单</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">电台</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">MV</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">数字专辑</a>
				</li>
				<li class="top_subnav_item">
					<a href="https://y.qq.com" class="top_subnav_link top_sub_nav__link--current">票务</a>
				</li>
   			</ul>
   			<div class="mod_top_search" role="search">
				<div class="g-search">
                    <input type="text" placeholder="搜索音乐、MV、歌单、用户"  class="u-iput"/>
                    <input type="button" value="搜索"  class="u-search"/>
                </div>
   			</div>
        
            <div class="mod_top_login">
                <div class="login">登录</div>
                <div class="VIP">开通VIP</div>
                <div class="pay">充值</div>
            </div>   
        </div>
        <div class="div1">
    <div class="div2">
        <div class="div21">歌单推荐</div>
        <div class="div22">
            <a href="" class="a1">为你推荐</a>
            <a href="" class="a1">经典</a>
            <a href="" class="a1">情歌</a>
            <a href="" class="a1">轻音乐</a>
            <a href="" class="a1">官方歌单</a>
            <a href="" class="a1">网络歌曲</a>
        </div>
        <div class="div23">
            <ul class="ul1">
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="./images/歌单推荐1.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">古风：一曲一场叹，一生为一人</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：5304.9万</div>
                    </div>                  
                </li>
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="./images/歌单推荐2.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">温柔点吧，这个世界已经够浮躁l</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：248.5万</div>
                    </div>                  
                </li>
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="./images/歌单推荐3.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">原耽:晋江同人猫耳FM广播剧</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：297.5万</div>
                    </div>                  
                </li>
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="./images/歌单推荐4.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">蔡徐坤：很高兴再次认识你</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：122.0万</div>
                    </div>                  
                </li>
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="./images/歌单推荐5.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">极丧：细节中崩溃……</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：957.4万</div>
                    </div>                  
                </li>
                <li class="li1">
                    <div class="231">
                        <div class="div2311">
                            <a href="https://y.qq.com/n/ryqq/playlist/7633043823">
                                <img  class="img1" src="../images/歌单推荐1.png" alt="">
                            </a>
                        </div>
                        <h4 class="h41">
                            <span class="span1">
                                <a class="a2" href="https://y.qq.com/n/ryqq/playlist/7633043823">古风：一曲一场叹，一生为一人</a>
                            </span>
                        </h4>
                        <div class="div2312">播放量：5304.9万</div>
                    </div>                  
                </li>
            </ul>
        </div>
        <div class="div24">
            <a class="a241">
                <i class="i411"></i>
                <i class="i412">1</i>
            </a>
            <a class="a241">
                <i class="i411"></i>
                <i class="i412">2</i>
            </a>
            <a class="a241">
                <i class="i411"></i>
                <i class="i412">3</i>
            </a>
        </div>
        </div>
    <div class="div3">
        <div class="div31">
            <a charset="a311">
                <i class="i3111">上一页</i>
                <i class="i3112"></i>
            </a>
        </div>
        <div class="div32">
            <a charset="a321">
                <i class="i3211">下一页</i>
                <i class="i3212"></i>
            </a>
        </div>
    </div>
</div></div>
    <div class="footer" role="footer">
        <div class="section_inner">
            <div class="footer_info">
                <div class="footer_download">
                    <h3 class="footer_tit">下载QQ音乐客户端</h3>
          <div class="pc">&nbsp;PC版</div>
          <div class="mac">&nbsp;Mac版</div>
          <div class="android">Android版</div>
          <div class="iphone">iPhone版</div>
                </div>
                <div class="footer_product">
          <h3 class="footer_tit">特色产品</h3>
          <div class="pc qmkg">&nbsp;全民K歌</div>
          <div class="mac super">Super&nbsp;Sound</div>
          <div class="android Qplay">&nbsp;&nbsp;Qplay</div>
          <div class="iphone Fan">&nbsp;&nbsp;Fan直播伴侣</div>
        </div>
        <div class="footer_link">
          <h3 class="footer_tit">合作链接</h3>
          <ul class="footer_link_list">
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">CJ&nbsp;ENM</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯视频</a>
              </li>
              <li class="footer_link_list_item">
               <a href="#" class="js_other_link">手机QQ空间</a>
              </li>
              <li class="footer_link_list_item">
               <a href="#" class="js_other_link">最新版QQ</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯社交广告</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">电脑管家</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">QQ浏览器</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯微云</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯云</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">企鹅FM</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">智能电视网</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">当贝市场</a>
              </li>
          </ul>
        </div>
                <div class="footer_group">

        </div>

                <div class="footer_platform"></div>
            </div>
            <div class="footer_copyright">
                <p>
                <a href="https://www.tencent.com/zh-cn" class="footera">关于腾讯</a>
                <a href="https://www.tencent.com/en-us/index.html" class="footera">|About Tencent</a>
                <a href="https://www.qq.com/contract.shtml" class="footera">|服务条款</a>
                <a href="http://y.qq.com/y/static/tips/service_tips.html"class="footera">|用户服务协议</a>
                <a href="https://y.qq.com/m/client/intro/privacy.html" class="footera">|隐私政策</a>
                <a href="https://y.qq.com/vip/right_declare/index.html" class="footera">|权力声明</a>
                <a href="https://e.qq.com/ads/" class="footera">|广告服务</a>
                <a href="https://careers.tencent.com/" class="footera">|腾讯招聘</a>
                <a href="https://kf.qq.com/" class="footera">|客服中心</a>
                <a href="https://www.qq.com/map/" class="footera">|网站导航</a>
                </p>
                <p>Copyright&nbsp;&copy;1998-2021&nbsp;Tencent.&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
                <p>
                腾讯公司
                <a href="" class="footera">版权所有</a>
                网络文化经营许可证:
                <a href="" class="footera">粤网文[2018]1999-0406</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>